import React from 'react';
import { Layout, Row, Col } from 'antd';
import './ResponsiveLayout.css';

const { Header, Content, Footer, Sider } = Layout;

const ResponsiveLayout = ({
  header,
  sidebar,
  content,
  footer,
  breakpoints = {
    xs: 480,
    sm: 576,
    md: 768,
    lg: 992,
    xl: 1200,
    xxl: 1600
  }
}) => {
  return (
    <Layout className="responsive-layout">
      {header && (
        <Header className="layout-header">
          {header}
        </Header>
      )}

      <Layout>
        {sidebar && (
          <Sider
            breakpoint="lg"
            collapsedWidth="0"
            className="layout-sider"
          >
            {sidebar}
          </Sider>
        )}

        <Content className="layout-content">
          <Row gutter={[16, 16]}>
            <Col
              xs={24}
              sm={24}
              md={24}
              lg={24}
              xl={24}
            >
              {content}
            </Col>
          </Row>
        </Content>
      </Layout>

      {footer && (
        <Footer className="layout-footer">
          {footer}
        </Footer>
      )}
    </Layout>
  );
};

export default ResponsiveLayout; 